<template>
  <div class="progress-container-wrap">
    <transition name="progress" appear :duration="{enter:300,leave:0}" @after-enter="afterEnter">
      <div v-if="show" class="progress-inner"></div>
    </transition>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const show = ref(false)
onMounted(() => {
  setTimeout(() => {
    show.value = true
  })
})
const emits = defineEmits(['close'])
function afterEnter() {
  emits('close')
}
defineExpose({
  setShow(value) {
    console.log(value, 'v')
  }
})
</script>


<style>


</style>

<style scoped lang="scss">

.progress-container-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;

  .progress-inner {
    background: #2f9bff;
    width: 0;
    height: 3px;

    &.progress-enter-active, &.progress-leave-active {
      transition: all .3s ease;
    }

    &.progress-enter-from {
      width: 0;
      opacity: 0;
    }

    &.progress-enter-to {
      width: 100%;
      opacity: 1;
    }
  }
}

</style>